import React, { CSSProperties } from 'react'
import { Tabs, Tab } from '@material-ui/core'
import {getClassOne,getClassAns} from '../../../api/classify'
import SecondClass from './SecondClass/SecondClass'
const containerStyle: CSSProperties = {
    display: 'flex',
    flexFlow: 'row nowrap',
    justifyContent: 'space-between',
    alignItems: 'flex-start'
}
const FirstStyle: CSSProperties = {
    width: '35vw',
    backgroundColor: '#fff'
}
const SecStyle: CSSProperties = {
    width: '60vw',
    backgroundColor: '#fff'
}
const FirstClass = () => {
    const [value, setValue] = React.useState(0);
    const handleChange = (event: React.SyntheticEvent, newValue: number) => {
        setValue(newValue);
    };
    const [classList,setList] = React.useState<Array<any>>([{}])
    React.useEffect(() => {
        getClassOne()
            .then(res => {
                const {data,code} = res as unknown as getClassAns
                if(code === 200){
                    setList(data)
                }
            })
    },[ ])
    return (
        <div style={containerStyle}>
            <div style={FirstStyle}>
                <Tabs value={value} 
                    onChange={handleChange} 
                    centered 
                    orientation="vertical"
                    textColor="secondary"
                    indicatorColor="secondary">
                    {
                        classList?.map(item => {
                            return (
                                <Tab key={item.classId + item.className} label={item.className}/>
                            )
                        })
                    }
                </Tabs>
            </div>
            <div style={SecStyle}>
                <SecondClass  classId={value + 1}/>
            </div>
        </div>
    )
}

export default FirstClass